﻿<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
	<head> 
	<title>SuperMap iclient for javascript</title>
	<!--<meta name="viewport" content="width=device-width, initial-scale=1"> -->
	<link rel="stylesheet" href="css/cloudFrame.css" />
	<script src="./js/jquery.js"></script>
	<script src="./js/common.js"></script>
	<script src="./js/SuperMap.js"></script>
	<script src="./js/QueryForCloudService.js"></script>
	<script src="./js/MeasureDistanceForCloud.js"></script>
	<script src="./js/ShotScreenControl.js"></script>
	<script src="./js/LocationControl.js"></script>
	<script src="./js/frame.js"></script>
	<script src="./js/cordova-1.7.0.js"></script>
	<style type="text/css">
	  .floatRight{
	    float:right;
	  }
	  #map{
	    position: absolute;
	    height: 100%;
	    width: 100%;
	    z-index: 1;
	  }
	  body{
		margin: 0px;
		overflow: hidden;
		-webkit-tap-highlight-color: rgba(0,0,0,0);/*bugyalu*/
	  }
	</style>
	<script type="text/javascript">
        var map, local, layer,markerLayer,myframe,localContrl;
	var markerLayer;
        var geolocate;
	var inpad = true;
	// 等待加载PhoneGap
	if(inpad){
		document.addEventListener("deviceready", onDeviceReady, false);
	}
	else{
		$(document).ready(function () {
			onDeviceReady();
		});
	}
	// PhoneGap加载完毕
	function onDeviceReady() {
	      // 地图初始化
            init();
	    myframe = new CloudFrame({
		"markerLayer":markerLayer,
		"map":map,
		"isApp":inpad
		});
		//将监听事件放在初始化过程中
        window.addEventListener("resize",onScreenOrientation);
	}
	
        function init() {
		SuperMap.Util.setApp(inpad);
           map = new SuperMap.Map("map", { controls: [
                      new SuperMap.Control.ScaleLine(),
                      new SuperMap.Control.PanZoomBar(),
                      new SuperMap.Control.Navigation({
                          dragPanOptions: {
                              enableKinetic: true
                          }
                      })], units: "m"
            });		
			
		/*
		 * 【使用MBTile缓存设置】
		 * 服务的名称“World”必须和MBTile文件的名称相同
		 * 实例化服务的时候必须增加 "storageType":"db" 参数
		 */
		//layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", DemoURL.china, {transparent: true, cacheEnabled: true}, {maxResolution:"auto","storageType":"db"}); 
        //layer.events.on({"layerInitialized": addLayer});
		
		layer = new SuperMap.Layer.CloudLayer();
	    markerLayer = new SuperMap.Layer.Markers("Markers");
            map.addLayers([layer,markerLayer]);
            map.setCenter(new SuperMap.LonLat(12957031.21685,4861858.2410885), 10);
	    //map.setCenter(new SuperMap.LonLat(104,30.5), 10);
	    //map.setCenter(new SuperMap.LonLat(30.5,104), 10);
	    //map.setCenter(new SuperMap.LonLat(0, 0), 0);
	    $("#gpsbtn").click(function () {
		if(inpad){
			//navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 5000, timeout: 120000, enableHighAccuracy: true });	
			if(localContrl){
				localContrl.local(onSuccess,onError,5000);
			}
			else{
				localContrl = new SuperMap.LocationControl();
				localContrl.local(onSuccess,onError,5000);
			}
		}
	     });
	    
        }
		
	//function addLayer(){
	//	map.addLayers([layer,markerLayer]);
	//	map.setCenter(new SuperMap.LonLat(12957031.21685,4861858.2410885), 10);
	//}
	function onScreenOrientation()
	{
		map.zoomIn();
		map.zoomOut();
	}
	
	// 获取位置信息成功时调用的回调函数
	function onSuccess(position) {
		var lat = position.lat;  
		var lon = position.lon; 
		markerLayer.clearMarkers();
		addposition(lon,lat);	
	}
	
	function addposition(lon,lat){ 
	    var size = new SuperMap.Size(44, 33);
		var offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
		var icon = new SuperMap.Icon("./images/mark.png", size, offset);
				  
		markerLayer.addMarker(new SuperMap.Marker(new SuperMap.LonLat(lon, lat), icon));
        map.setCenter(new SuperMap.LonLat(lon, lat));
	}
	
	
	// onError回调函数接收一个PositionError对象
	function onError(error) {
	  alert('code: '    + error.code    + '\n' +
		  'message: ' + error.message + '\n');
	}
    </script>
</head>
<body><!--onload="onDeviceReady()"-->
<!--<div id="mybody">-->
	<div class="logo"></div>
  <div id="toolbar" class="toolbar" style="display: block;">
    <!--<div data-role="header" data-theme="b">
	  <div data-role="fieldcontain">
	    <input id="ipt1" name="password" id="search" value="" data-inline="true"/>
	    <a id="seabtn1" class="floatRight" href="" data-role="button" data-icon="search" data-inline="true">搜索</a>
	    <a id="menubtn" class="floatRight" href="" data-role="button" data-icon="grid" data-inline="true">菜单</a>
	    <a id="gpsbtn" href="" data-role="button" data-icon="gear" data-inline="true">定位</a>
	  </div>
    </div>-->
	<input id="ipt1" value="" class="ipt"/>
	<span id="seabtn1" class="btn"><span class="icon icon1"></span><span class="txt">搜索</span></span>
	<span id="shotscreen" class="floatRight btn"><span class="icon icon6"></span><span class="txt">截图</span></span>
	<span id="measurebtn" class="floatRight btn"><span class="icon icon6"></span><span class="txt">测距</span></span>
	<span id="gpsbtn" class="floatRight btn"><span class="icon icon3"></span><span class="txt">定位</span></span>
	<span id="menubtn" class="floatRight btn"><span class="icon icon2"></span><span class="txt">菜单</span></span>
  </div>
  <div id="meaTlb" class="toolbar hide_bar" style="display: none;">
	<input id="ipt3" value="单击绘点，双击完成" readonly="readonly" class="ipt"/>
	<span id="measurebtn2" class="floatRight btn"><span class="icon icon6"></span><span class="txt">重测</span></span>
	<span id="clr_mea" class="floatRight btn" style="display: none;"><span class="icon icon5"></span><span class="txt">清除</span></span>
	<span id="rtn_mea" class="floatRight btn"><span class="icon icon4"></span><span class="txt">返回</span></span>
  </div>
  <div id="map" >             
  </div>
  <div id="dialog" class="diahide" style="display: none;">
	<!--<div data-role="header" data-theme="b">
	  <div data-role="fieldcontain">
	    <input id="ipt2" name="password" id="search" value="" data-inline="true"/>
	    <a id="seabtn2" class="floatRight" href="" data-role="button" data-icon="search" data-inline="true">搜索</a>
	    <a id="returnbtn" class="floatRight" href="" data-role="button" data-icon="back" data-inline="true">返回</a>
	  </div>
	</div>-->
	<div class="toolbar">
		<input id="ipt2" name="password" class="ipt"/>
		<span id="returnbtn" class="floatRight btn"><span class="icon icon4"></span><span class="txt">返回</span></span>
		<span id="seabtn2" class="floatRight btn"><span class="icon icon1"></span><span class="txt">搜索</span></span>
	</div>
	<div id="keywordList"></div>
	<div id="resultList"></div>
  </div>
  <div id="loading" class="loahide">
    <div class="icon">
    </div>
  </div>
<!--</div>-->
</body>
</html>